<script setup lang="ts">
import CustomNavbarMstinfo from "@/pages/mstinfo/components/CustomNavbarMstinfo.vue";
import { getMstinfoById } from "@/services/mst";
import type { mstInfoByIdDtos } from "@/types/mstinfo";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
const query = defineProps<{
  mstinfoId: string;
}>();
const back = () => {
  uni.navigateBack();
};

const mstInfoByIdDtosData = ref<mstInfoByIdDtos>();
const getMstinfoByIdData = async () => {
  const res = await getMstinfoById(query.mstinfoId);
  mstInfoByIdDtosData.value = res.data;
};

onLoad(() => {
  console.log(query.mstinfoId);
  getMstinfoByIdData();
});
</script>

<template>
  <CustomNavbarMstinfo></CustomNavbarMstinfo>

  <view @tap="back">
    <uni-icons type="left" size="25"></uni-icons>
    <text>返回</text>
  </view>

  <uni-card
    :title="mstInfoByIdDtosData?.mstInfoTitle"
    :sub-title="mstInfoByIdDtosData?.mstInfoDes"
    padding="10px 0"
    :is-shadow="false"
  >
    <image
      style="width: 100%"
      :src="mstInfoByIdDtosData?.mstSel.mstSelImg"
    ></image>
    <rich-text
      :nodes="mstInfoByIdDtosData?.mstDetail.mstDetailInfo"
    ></rich-text>

    <view class="text"><span>&emsp;</span></view>
    <view class="text"><span>&emsp;</span></view>

    <view class="card-actions">
      <uni-row class="demo-uni-row" width="790">
					<uni-col :span="12">
						<view class="demo-uni-col dark"></view>
					</uni-col>
					<uni-col :span="12">
						<view class="demo-uni-col light"></view>
					</uni-col>
				</uni-row>
    </view>
  </uni-card>
</template>

<style lang="scss" scoped>
.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}
</style>